import React from "react";
import { Button, Form, Tag, Radio } from "antd";
import Chooser from "components/chooser";
import PersonSelector from "components/person-selector/index";
import ListSelector from "components/list-selector";
import chooserData from "share/chooserData";

const FormItem = Form.Item;
const RadioGroup = Radio.Group;

export default {
  key: "person-selector",
  name: "Person-selector 选择器",
  author: "",
  description: "人员选择器",
  isExampleFull: false,
  api: [
    {
      title: "API",
      data: [
        {
          param: "type",
          description: "数据类型，不可更改",
          type: "string",
          defaultValue: "user",
        },
        {
          param: "single",
          description: "是否为单选",
          type: "bool",
          defaultValue: "false",
        },
        {
          param: "searchOnFocus",
          description: "组件获焦时是否搜索(针对单选组件)",
          type: "bool",
          defaultValue: "true",
        },
        {
          param: "exitStaffSelectEnable",
          description: "离职员工是否可以被选择操作",
          type: "bool",
          defaultValue: "false",
        },
        {
          param: "searchEnable",
          description: "单选时是否支持搜索",
          type: "bool",
          defaultValue: "true",
        },
        {
          param: "params",
          description: "接口额外参数，对应的mulity是params，对应的chooser是listExtraParams。",
          type: "object",
          defaultValue: '{"page":0,"size":10,"roleType":"TENANT","status":"all"}',
        },
      ],
      description: "",
    },
  ],
  example: [
    {
      title: "基础用法",
      description: [
        "1. 该组件是单一功能的人员选择控件，是一种结合chooser组件与mulity-selector组件的高阶组件，当为单选时，使用的是mulity-selector组件，多选时，使用chooser组件.",
        "2. 除了个别组件自身的属性外，其它props与当前代理的组件相同。",
        "3. type默认使用chooserData中的user数据，且不支持修改。",
      ].join("\n"),
      state: {
        personList: [],
        single: true,
        searchOnFocus: false,
        exitStaffSelectEnable: false,
        searchEnable: true,
      },
      getMethod: (context) => {
        return {
          handleChange: (data) => {
            console.log("person selector", data);
            context.setState({
              personList: data,
            });
          },
          onPropsChange: (propName, e) => {
            console.log("onPropsChange", propName, e.target.value);
            context.setState({
              [propName]: e.target.value,
            });
          },
        };
      },
      getContent: (context) => {
        const { personList, single, searchOnFocus, exitStaffSelectEnable, searchEnable } = context.state;
        return (
          <div style={{ width: "100%" }}>
            <div className={"mt-10"}>
              <div>是否单选:&nbsp;&nbsp;</div>
              <RadioGroup onChange={(e) => context.onPropsChange("single", e)} value={single}>
                <Radio key={"y"} value={true}>
                  是
                </Radio>
                <Radio key={"n"} value={false}>
                  否
                </Radio>
              </RadioGroup>
            </div>
            <div className={"mt-10"}>
              <div>组件获焦时是否搜索(针对单选组件):&nbsp;&nbsp;</div>
              <RadioGroup onChange={(e) => context.onPropsChange("searchOnFocus", e)} value={searchOnFocus}>
                <Radio key={"y"} value={true}>
                  是
                </Radio>
                <Radio key={"n"} value={false}>
                  否
                </Radio>
              </RadioGroup>
            </div>
            <div className={"mt-10"}>
              <div>离职员工是否可以被选:&nbsp;&nbsp;</div>
              <RadioGroup
                onChange={(e) => context.onPropsChange("exitStaffSelectEnable", e)}
                value={exitStaffSelectEnable}
              >
                <Radio key={"y"} value={true}>
                  是
                </Radio>
                <Radio key={"n"} value={false}>
                  否
                </Radio>
              </RadioGroup>
            </div>
            <div className={"mt-10"}>
              <div>是否支持搜索:&nbsp;&nbsp;</div>
              <RadioGroup onChange={(e) => context.onPropsChange("searchEnable", e)} value={searchEnable}>
                <Radio key={"y"} value={true}>
                  是
                </Radio>
                <Radio key={"n"} value={false}>
                  否
                </Radio>
              </RadioGroup>
            </div>
            <PersonSelector
              type="user"
              single={single}
              exitStaffSelectEnable={exitStaffSelectEnable}
              searchOnFocus={searchOnFocus}
              valueKey="userOID"
              labelKey="fullName"
              searchEnable={searchEnable}
              onChange={context.handleChange}
            />
            <div>
              <span>当前选中的人为: </span>
              <span>
                {personList
                  .map((person) => {
                    return person.fullName;
                  })
                  .join(", ") || "-"}
              </span>
            </div>
          </div>
        );
      },
    },
  ],
};
